<template>
  <div class="w">
    <div id="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Top100 积分榜</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <!-- <el-table :data="userList" stripe style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="date" label="用户名" width="180"></el-table-column>
          <el-table-column prop="date" label="积分" width="180"></el-table-column>
          <el-table-column prop="date" label="主题数" width="180"></el-table-column>
          <el-table-column prop="date" label="评论数" width="180"></el-table-column>
        </el-table> -->
      </el-card>
    </div>
    <!-- 右侧区域 -->
    <div id="sidebar">
      <!-- 登录区域 -->
      <div class="panel">
        <div class="inner">
          <p>
            CNode：Node.js专业中文社区
          </p>
          <div>您可以 <a href="javascript:;">登录 </a>或 <a href="javascript:;"> 注册</a>，也可以</div>
          <el-button type="primary" class="loginbtn">通过 GitHub 登录</el-button>
        </div>
      </div>
      <!-- 友情社区 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">友情社区</span>
        </div>
        <div class="inner">
          <ol class="friendship-community">
            <li>
              <a href="javascript:;">
                <img src="../../public/images/ruby-china-20150529.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../../public/images/golangtc-logo.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../../public/images/phphub-logo.png" alt="" />
              </a>
            </li>
          </ol>
        </div>
      </div>
      <!-- 二维码区域 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">客户端二维码</span>
        </div>
        <div class="inner app_download">
          <img width="200px" src="../../public/images/QRcode.png" alt="" />
          <br />
          <a href="https://github.com/soliury/noder-react-native" target="_blank">客户端源码地址</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: {}
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get('top')
      if (res.status !== 200) {
        // return this.$message.error('获取失败')
      }
      this.userList = res.data
      console.log(this.userList)
    }
  }
}
</script>

<style lang="less" scoped></style>
